<template>
  <div class="add-device">
    <div class="e-nav-bar">
      <div>
        <van-icon class="e-nav-bar__back" name="arrow-left" size="24" @click="onClickLeft" />
      </div>
      <div class="e-nav-bar__title e-flex-y-center e-flex-between">
        <div class="e-f-24 e-bold">添加设备</div>
        <div class="e-flex-y-center e-flex-between e-color-999" @click="goRecord">
          <div class="e-mr-5">添加记录</div>
          <i class="iconfont icon-wulumuqishigongandashujuguanlipingtai-ico- e-f-20"></i>
        </div>
      </div>
    </div>
    <div style="height:90px;"></div>
    <div class="add-device-sidebar">
      <div class="add-device-sidebar-inner">
        <div
          v-for="n in deviceMap"
          :key="n.id"
          class="add-device-sidebar-item e-flex-column e-flex-center e-flex-items-center"
          :class="{'is-active':active==n.id}"
          @click="active=n.id"
        >
          <van-image width="40px" height="40px" :src="`/ilink-app-h5-zd/static/addDevice/image/${n.id}-icon.png`" />
          <div class="e-mt-5">{{n.name}}</div>
        </div>
        <div
          :key="0"
          class="add-device-sidebar-item e-flex-column e-flex-center e-flex-items-center"
          :class="{'is-active':active===0}"
          @click="active=0;scanCodeOther()"
        >
          <div class="e-mt-5">其他</div>
        </div>
      </div>
    </div>
    <div class="add-device-body">
      <div v-for="n in deviceMap" :key="n.id" v-show="active==n.id" class="e-flex e-flex-wrap">
        <div v-for="m in n.children" :key="m.id" class="add-device-item" @click="scanCode(m)">
          <div class="e-flex-xy-center">
            <van-image width="50px" height="50px" :src="`/ilink-app-h5-zd/static/addDevice/image/${n.id}-${m.id}-icon.png`" />
          </div>
          <div class="e-f-12 e-color-333 e-mt-10 add-device-item-name ell text-center">{{m.name}}</div>
          <div class="e-f-12 e-color-333 e-mt-5 add-device-item-name ell text-center">{{m.code}}</div>
        </div>
      </div>
    </div>

    <scan-tip v-show="showTip" :typeObj="typeObj" @close="showTip=false" />

    <van-dialog
      v-model="showConfirm"
      show-cancel-button
      :show-confirm-button="typeObj.pid!=110"
      cancelButtonText="修改设备信息"
      cancelButtonColor="#999"
      confirmButtonText="查看设备"
      confirmButtonColor="#2471CA"
      @confirm="goDetail"
      @cancel="goEdit"
    >
      <div slot="title" class="e-flex-x-center e-relative e-bold e-pb-20 e-pt-20">
        该设备已存在！
        <div class="e-p-5" style="position:absolute;top:-20px;right:5px;" @click="showConfirm=false">
          <van-icon name="close" size="20" />
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import ScanTip from './ScanTip.vue'
import api from '@/api/apiConfig'
import { checkDeviceIdInfo } from '@/api/device'
let typeOptions = []
export default {
  name: 'AddDevice',
  components: { ScanTip },

  data() {
    return {
      deviceMap: [],
      active: 1,
      showTip: false,
      typeObj: {},
      showConfirm: false,
    }
  },

  computed: {},

  watch: {
    showTip(val) {
      if (val) {
        myVue.showScanTip = () => {
          this.showTip = false
        }
      } else {
        myVue.showScanTip = null
      }
    },
  },

  created() {
    this.getConfig()
    this.defineScanCode()
    window.testDeviceAdd = () => {
      this.test(110, 112, 0, 1)
      // this.test(10,2,1,1)
      // this.test(50,51,0,1)
      // this.test(60,61,1,1)
      // this.test(60,61,0,1)
      // this.test(60,61,0,0)
      // this.test(70,71,1,1)
      // this.test(70,71,0,1)
      // this.test(70,71,0,0)
      // this.test(80,81,1,1)
      // this.test(80,81,0,1)
      // this.test(80,81,0,0)
      // this.test(80,82,0,1)
      // this.test(80,82,0,0)
    }
  },

  activated() {
    this.defineScanCode()
  },

  mounted() {},

  methods: {
    goDetail() {
      this.showTip = false
      this.showConfirm = false
      window.top.goDeviceDetail({
        fcFacilitiesId: this.repeatFcfId,
      })
    },
    // 新增
    goForm(code) {
      this.showTip = false
      this.showConfirm = false
      this.$router.push({
        name: this.typeObj.id === 0 ? 'DeviceFormOther' : 'DeviceForm',
        params: {
          code,
          typeObj: this.typeObj,
        },
      })
    },
    // 编辑
    goEdit() {
      this.showConfirm = false
      this.$nextTick(() => {
        this.$router.push({
          name: 'DeviceForm',
          params: {
            data: {
              recordId: this.repeatFcfId,
              businessType: this.typeObj.pid == 110 ? 2 : 1,
            },
            typeObj: this.typeObj,
          },
        })
      })
    },
    showRepeatTip(id) {
      this.repeatFcfId = id
      this.showConfirm = true
    },
    checkDeviceIdInfo(code) {
      checkDeviceIdInfo({ deviceNo: code, deviceType: this.typeObj.pid }).then(
        ({ data }) => {
          if (data) {
            this.showRepeatTip(data)
          } else {
            this.goForm(code)
          }
        }
      )
    },
    defineScanCode() {
      window.getQode = (code) => {
        if (this.typeObj.id === 0) {
          this.goForm(code)
        } else {
          this.checkDeviceIdInfo(code)
        }
      }
    },
    getConfig() {
      api
        .getJSON({
          url:
            '/ilink-app-h5-zd/static/addDevice/deviceMap.json?' +
            new Date().getTime(),
          method: 'get',
        })
        .then(({ data }) => {
          this.deviceMap = data
          this.active = data[0].id
          typeOptions = JSON.parse(JSON.stringify(data))
          typeOptions.unshift({
            name: '全部',
            id: '',
            children: [],
          })
          typeOptions.forEach((n) => {
            n.children.unshift({
              name: '全部',
              id: '',
            })
          })
        })
    },
    goRecord() {
      this.$router.push({
        name: 'AddRecord',
        params: {
          refresh: true,
          typeOptions,
        },
      })
    },
    scanCode(val) {
      this.typeObj = val
      if (
        localStorage.getItem(`ilink_addDeviceScanTip_${val.pid}_${val.id}`) ===
        '1'
      ) {
        this.$native.scanQrCode()
      } else {
        this.showTip = true
      }
    },
    scanCodeOther() {
      this.scanCode({
        id: 0,
        name: '其他',
        pid: 0,
      })
    },
    onClickLeft() {
      window.top.app.methods.backToTab()
    },
    test(pid = 60, id = 61, isVerify, isSuccess) {
      if (isVerify) {
        this.$router.push({
          name: 'Verifying',
          params: {
            id: 2204143,
            deviceNo: '202205260913122',
            typeObj: {
              id,
              pid,
              name: '海康烟感',
              code: '1',
              verifyImgNum: 2,
            },
          },
        })
      } else {
        this.$router.push({
          name: isSuccess ? 'VerifySuccess' : 'VerifyFail',
          params: {
            id: 2204072,
            deviceNo: '861561051337474',
            typeObj: {
              id,
              pid,
              name: '海康烟感',
              code: '1',
              verifyImgNum: 2,
            },
            deviceData: {
              messageData:
                '861561051337474861561051337474861561051337474861561051337474',
            },
          },
        })
      }
    },
  },
}
</script>
<style lang='scss'>
.add-device {
  &-body {
    padding: 0 15px 15px 80px;
  }
  &-item {
    margin: 0 0 15px 15px;
    padding: 15px 2px;
    background: #f3f3f3;
    border-radius: 15px;
    width: calc(50% - 15px);
    min-height: 132px;
    box-sizing: border-box;
  }
  &-sidebar {
    padding-right: 12px;
    position: fixed;
    top: 90px;
    left: 0;
    bottom: 0;
    width: 74px;
    overflow-y: auto;
    &-inner {
      background: #f3f3f3;
      border-top-right-radius: 6px;
    }
    &-item {
      margin-top: 10px;
      padding: 10px 3px;
      text-align: center;
      color: #333;
      font-size: 12px;
      .van-image {
        display: none;
      }
      &.is-active {
        background: #fff;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        width: 74px;
        box-shadow: 0 2px 12px 0 rgba(179, 200, 205, 0.5);
        font-weight: 600;
        .van-image {
          display: inline-block;
        }
      }
    }
  }
}
</style>